import React, { Component } from "react";
import "./ReplaceBankCardPage.scss";
import { connect } from "react-redux";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import { Modal, Toast } from "antd-mobile";
import { channelCode, InterfaceG } from "../../../../config/Config";
import yhTools from "../../../../tools/yh";
import SendMSGCode from "../../../../component/sendMSGCode/sendMSGCode";

class ReplaceBankCardPage extends Component {
	constructor(props) {
		super(props);
		this.state = {
			// channelCode: this.props.match.params.channelCode, //渠道编号
			modal2: false,
			selectIndex: 0,
			allInputFlag: false, //控制按钮是否高亮
			msgSubmitButtStatus: "3",
			msgSubmitButtText: "确认更换",
			userInfoVo: {},
			currentCard: {
				// "amount": "5000",
				// "bankMobilePhone": "133****9875",
				// "bankName": "招商银行",
				// "bindCardNo": "85b04b4a272841e8acaae374146aaf7a",
				// "cardNo": "6688",
				// "dayAmount": "5000",
				// "logoUrl": "http://10.0.12.26/h5/image/bankLogo/CMB.jpg"
			},
			selCardList: [
				// {
				// "amount": "50000",
				// "bankMobilePhone": "133****9875",
				// "bankName": "上海浦东发展银行",
				// "bindCardNo": "246241c75f964c93804dd9e63bfeb6d4",
				// "cardNo": "7276",
				// "dayAmount": "50000",
				// "logoUrl": "http://10.0.12.26/h5/image/bankLogo/SPD.jpg"
				// }
			],

			showMsgBox: false, //控制是否显示发送验证码弹窗
			messageSerialNumber: "", //发送短信成功后返回的流水号
			sendSuccessPhone: "" //发送短信成功后返回的手机号
		};
	}

	componentDidMount() {
		this.getInitData();
	}

	getInitData() {
		let objs = {
			url: InterfaceG.changeCardInit,
			params: {
				channelCode: channelCode
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 100, () => {});
		let _that = this;
		yhTools.request(objs).then(res => {
			// console.log(JSON.stringify(res));
			Toast.hide();
			if (res.code === "0") {
				_that.setState({
					currentCard: res.data.currentCard,
					selCardList: res.data.selCardList,
					userInfoVo: res.data.userInfoVo,
					allInputFlag: !(res.data.selCardList.length <= 0)
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	showModal = key => e => {
		e.preventDefault(); // 修复 Android 上点击穿透
		this.setState({
			[key]: true
		});
	};
	onClose = key => () => {
		this.setState({
			[key]: false
		});
	};

	render() {
		const _pageParams = {
			header: {
				title: "更换绑定银行卡"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		let { sendSuccessPhone, showMsgBox } = this.state;
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="replace-bank-card-page">
					<div className="line-1">
						<div className="line-1-tips">当前绑定卡</div>
						<div className="item-div">
							<img className="item-logo" src={this.state.currentCard.logoUrl} />
							<div className="item-title">
								{this.state.currentCard.bankName}(
								{this.state.currentCard.cardNo})
							</div>
						</div>
					</div>
					<div className="line-2">
						<div className="line-2-1">更换为</div>
						{this.state.selCardList.length > 0 && (
							<div className="line-2-2">
								<div className="bank-item" onClick={this.showModal("modal2")}>
									<img
										className="item-left-img"
										src={this.state.selCardList[this.state.selectIndex].logoUrl}
									/>
									<div className="item-center">
										<div className="center-top">
											{this.state.selCardList[this.state.selectIndex].bankName}(
											{this.state.selCardList[this.state.selectIndex].cardNo})
										</div>
										<div className="center-bottom">
											单笔上限
											{this.state.selCardList[this.state.selectIndex].amount}
											元，单日上限
											{this.state.selCardList[this.state.selectIndex].dayAmount}
											元
										</div>
									</div>
									<div className="item-right-arrow" />
								</div>
								<div className="line-2-21">
									<div className="item-left">银行预留手机</div>
									<div className="item-right">
										{
											this.state.selCardList[this.state.selectIndex]
												.bankMobilePhone
										}
									</div>
								</div>
							</div>
						)}
						{this.state.selCardList.length <= 0 && (
							<div className="line-2-2" onClick={this.showModal("modal2")}>
								<div className="line-2-no">
									<div className="no-span">请绑定新的银行卡</div>
									<div className="item-right-arrow" />
								</div>
							</div>
						)}
					</div>
					<a
						className={
							this.state.allInputFlag
								? "submit-btn submit-btn-success"
								: "submit-btn btn-grey"
						}
						id="bottomDom"
						onClick={this.sendYzm.bind(this)}
					>
						下一步
					</a>
				</div>
				<Modal
					popup
					visible={this.state.modal2}
					onClose={this.onClose("modal2")}
					animationType="slide-up"
				>
					<div className="pop-div">
						<div className="pop-header">
							<div
								className="header-left"
								onClick={this.gotoSupportBank.bind(this)}
							>
								支持银行
							</div>
							<div className="header-center">选择绑定卡</div>
							<div className="header-right" onClick={this.onClose("modal2")} />
						</div>
						<div className="pop-content1">
							{this.state.selCardList.map((item, index) => {
								return (
									<div
										className="bank-item"
										key={index}
										onClick={this.itemClick.bind(this, index)}
									>
										<img className="item-left-img" src={item.logoUrl} />
										<div className="item-center">
											<div className="center-top">
												{item.bankName}({item.cardNo})
											</div>
											{/* <div className="center-bottom">
												单笔上限{item.amount}，单日上限{item.dayAmount}
											</div> */}
										</div>
										{this.state.selectIndex === index && (
											<div className="item-right-arrow" />
										)}
									</div>
								);
							})}
							<div
								className="bank-item bank-item-2"
								onClick={this.addSupportBanks.bind(this)}
							>
								<img
									className="item-left-img"
									alt=""
									src={require("../../../../images/icon-open-account-add.png")}
								/>
								<div className="item-center">
									<div className="center-no">绑定新的银行卡</div>
								</div>
							</div>
						</div>
					</div>
				</Modal>
				<SendMSGCode
					ref={ref => {
						this.sendCode = ref;
					}}
					getYZMCode={this.sendYzm.bind(this)}
					sendSuccessPhone={sendSuccessPhone}
					submitCode={this.submitCode.bind(this)}
					closeSendModal={this.closeSendModal.bind(this)}
					showMsgBox={showMsgBox}
					seconds={60}
				/>
			</MainLayout>
		);
	}

	//短信验证码验证接口
	sendYzm() {
		let _that = this;
		if (!this.state.allInputFlag) {
			//按钮置灰时不可用
			return false;
		}
		let objs = {
			url: InterfaceG.changeCardVcode,
			params: {
				channelCode: channelCode,
				bindCardNo: this.state.selCardList[this.state.selectIndex].bindCardNo
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code == "0") {
				_that.sendCode.countdown();
				_that.setState({
					sendSuccessPhone: res.data.sendSuccessPhone,
					messageSerialNumber: res.data.messageSerialNumber,
					showMsgBox: true //显示验证码
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	//提交回调
	submitCode(code) {
		if (code == "" || code.toString().length < 6) {
			Toast.info("请输入六位验证码", 2);
			return;
		}
		let objs = {
			url: InterfaceG.changeCard,
			params: {
				channelCode: channelCode,
				bindCardNo: this.state.selCardList[this.state.selectIndex].bindCardNo,
				messageSerialNumber: this.state.messageSerialNumber,
				verifyCode: code
			},
			_alertShow: false
		};
		let _that = this;
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code === "0") {
				_that.setState({
					showMsgBox: false
				});
				setTimeout(() => {
					_that.gotoNextPage();
				}, 1000);
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	//关闭验证码弹框
	closeSendModal() {
		this.setState({
			showMsgBox: false
		});
	}

	//跳转银行电子账户
	gotoNextPage() {
		this.props.history.goBack();
	}

	//点击银行列表
	itemClick(index) {
		this.setState({
			modal2: false,
			selectIndex: index
		});
	}

	//添加支持银行
	addSupportBanks() {
		this.setState({
			modal2: false
		});
		let data = {
			type: "replace",
			channelCode: channelCode,
			idNo: this.state.userInfoVo.idNo,
			userName: this.state.userInfoVo.userName
		};
		this.props.history.push({
			pathname: `/addBankCard/${JSON.stringify(data)}`
		});
	}

	//查看支持银行列表
	gotoSupportBank() {
		this.setState({
			modal2: false
		});
		this.props.history.push({
			pathname: `/supportBank/${channelCode}`
		});
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(ReplaceBankCardPage);
